Cloudinary 動画ソリューションのすごいところをまとめてみた

そんなこともできるのか！！っていうCloudinaryの動画ソリューションです。

#動画配信

#動画編集

#Cloudinary

Ito ma

2021.01.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Cloudinaryは、画像や動画、その他のデジタルアセットを管理、変換・最適化、そして配信まですべてできる SaaS です。本ブログでも特に画像変換に関する記事が多く紹介されていますが、今回はその Cloudinary の動画ソリューションについて、まとめていきます。

そもそも動画を使う理由

動画がマーケティングに活用すると効果的なことは明白ですが、2021年時点では86%ものビジネスにて動画が使われていて、2023年までにインターネット通信全体の82%を動画が占めることになるともいわれています。

動画のコンテンツはもちろん重要ですが、どのようなプレイヤーで、広告やその後のオススメ動画はどうするか、といった見せ方も、効果を引き出す上で大事になってきます。

動画の変換

即座に適用できる動画の変換

Cloudinaryでは、アセットのURLに変換パラメータを加えるだけで即座に変換を適用させることができます。Cloudinaryのドキュメントの例を見てみると、犬の顔全体が映ったオリジナルの動画に対し、そのURLへ幅、高さ、切り抜き方法をそれぞれ指定する3つのパラメータを加えることで新しい小さい動画を生成しています。

容量の大きい動画の場合は事前に生成しておけばさらに効率よく配信することができますが、この程度の動画は事前生成せずともその場ですぐ生成&再生でき、処理を待つ必要もありません。もちろん、変換してもオリジナルは保持されます。

かしこく最適化

Cloudinaryの画像最適化を知っている人には馴染み深いであろう、f_auto や q_auto が動画にも適用させることができます！

動画のフォーマットにはそれに合ったコーデック（圧縮技術）があり、対応するブラウザやプレイヤーも考慮する必要があります。Cloudinaryでは、フォーマットパラメータ（f_）であらゆる形式へ動画を変換させられるだけでなく、f_auto を使えば、視聴ブラウザ/デバイスでサポートされて、かつ圧縮率が最適な動画形式・コーデックを自動的に判定して、変換・配信してくれます。

主な動画形式とサポートされるブラウザ （2021年1月時点）

形式	コーデック	ブラウザ
MP4	H264	Chrome, Edge, Firefox, Opera, Safari
MP4	H265	Edge, Safari
WebM	VP9	Chrome, Edge, Firefox, Opera

例えば、先ほどの犬の動画にf_autoを加えて再生した場合、MP4で338,262byteのオリジナルがそれぞれ異なる形式に変換され、いずれもサイズが小さくなります。

ブラウザ	形式/コーデック	サイズ
Chrome	WebM/VP9	299,372
Safari	MP4/HVC1(HEVC,H.265)	280,333
FireFox	MP4/AVC1(H.264)	312,436

また、品質パラメータ q_auto は、視覚的なエクスペリエンスを変えることなく動画を最適に圧縮してくれます。

これらのパラメータや圧縮は、変換デモページから試すことができます！手元にちょうどいい動画がない場合でも、サンプルをクリックするか、以下のようなパブリックの動画URLをコピーして、アップロード時に指定することもできます。

素敵なサイトの素敵な動画を見つけたら、右クリックからURLをコピー

デモページで UPLOAD YOUR VIDEO をクリックし、Web Address にURLを貼り付けて確定

※2,3分を超えるような長い動画だと、処理に少し時間がかかる場合があります。

◆ ドキュメント: Video optimization

AI による対象物を追いかけるクロッピング

先ほど犬の動画を小さいサイズに変換して中央で切り抜いていましたが、動画の場合にはフレーム内で対象物が動く可能性があり、固定で切り抜いては大事な部分がフレームアウトしてしまいます。Cloudinaryの自動切り抜きパラメータ（g_auto）を使えば、被写体を検知して、フレームにおさまるよう自動的に良い感じに切り抜いてくれます。